<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="cube">
			<div class="box1">
				<img src="img/avgpic1.jpg" >
			</div>
			<div class="box2">
				<img src="img/avgpic2.jpg" >
			</div>
			<div class="box3">
				<img src="img/avgpic3.jpg" >
			</div>
			<div class="box4">
				<img src="img/avgpic4.jpg" >
			</div>
			<div class="box5">
				<img src="img/avgpic5.jpg" >
			</div>
			<div class="box6">
				<img src="img/avgpic6.jpg" >
			</div>

		</div>
	</body>
</html>
<style type="text/css">
	html{
		perspective: 800px;
		background-color: #F3F3F3;
	}
	img{
		height: 200px;
		width: 200px;
		border: 1px solid #f2f2f2;
		/* 消除图片边距 */
		vertical-align: top;
	}
	.cube{
		width: 200px;
		height: 200px;
		margin: 100px auto;
		/* 设置3d变形效果 */
		transform-style: preserve-3d;
		/* transform: rotateX(45deg) rotateZ(45deg); */
		animation: rotate 20s linear infinite;
	}
	.cube > div{
		width: 200px;
		height: 200px;
		opacity: 0.7;
		position: absolute;
	}
	.box1{
		transform: rotateY(90deg) translateZ(100px);
	}
	.box2{
		transform: rotateY(-90deg) translateZ(100px);
	}
	.box3{
		transform: rotateX(90deg) translateZ(100px);
	}
	.box4{
		transform: rotateX(-90deg) translateZ(100px);
	}
	.box5{
		transform:rotateY(0deg) translateZ(100px);
	}
	.box6{
		transform:rotateY(180deg)translateZ(100px);
	}
	@keyframes rotate{
		from{
			transform: rotateX(0) rotateZ(0);
		}
		to{
			transform: rotateX(1turn) rotateZ(1turn);
		}
	}
</style>